<template>
  <div id="EditDel" style="text-align: center;" :scope='!scope.row.edit&&!option.edit?editFn(scope.row):true'>

    <el-button v-if="!scope.row.edit&&!option.edit" class="iconBtn" type="text" size="small" @click="cliEdit(scope)">
      <img src="../../assets/images/edit.svg" class="btn-icon">
    </el-button>
     <el-button   type="text" size="small"  v-else-if='option.edit' class="iconBtn" style="text-align: center;">
       <i :class="option.closeIcon||'el-icon-error'" @click="$set(scope.row,'edit',false);del(scope.row.id,scope.$index,scope);" />
     </el-button>
    <el-button   type="text" size="small"  v-show='scope.row.edit' class="iconBtn" style="text-align: center;">
      <i v-if='!option.hideOk' :class="'editOk '+(option.okIcon||'el-icon-success')" @click="$set(scope.row,'edit',false);confirmEdit(scope.row);" />

      <i v-if='!option.hideDel' type="test" :class="option.delIcon||'el-icon-delete'" @click="del(scope.row.id,scope.$index,scope)" />
      <i v-if='!option.hideColse' :class="option.colseIcon||'el-icon-error'" @click="$set(scope.row,'edit',false);close(scope.row.id)" />
    </el-button>
  </div>
</template>
<script>
    // doc: https://panjiachen.github.io/vue-element-admin-site/feature/component/svg-icon.html#usage
   // import { isExternal } from '@/utils/validate'

    export default {
        name: 'EditDel',
        props:{
          scope:{
            type: Object,
            default:()=>{
              return {}
            }

          },
          option:{
            type:Object,
              default:()=>{
              return {}
            }
          }
        },
        data() {
          return {

          }
        },
        computed: {

            // isExternal() {
            //     return isExternal(this.iconClass)
            // },
            // iconName() {
            //     return `#icon-${this.iconClass}`
            // },
            // svgClass() {
            //     if (this.className) {
            //         return 'svg-icon ' + this.className
            //     } else {
            //         return 'svg-icon'
            //     }
            // },
            // styleExternalIcon() {
            //     return {
            //         mask: `url(${this.iconClass}) no-repeat 50% 50%`,
            //         '-webkit-mask': `url(${this.iconClass}) no-repeat 50% 50%`
            //     }
            // }
        },
        watch: {
['scope.row.edit']:{
  handler: function(va) {
     console.log('撒',va)
     if((va&&!this.option._edit_)){
         console.log('撒',va)
         this.editFn(this.option._edit_list?this.option._edit_list:this.scope.row)
     }
  },
  immediate: true


}

        },
        methods: {
          // _scope(_list){
          //   this.editFn(_list)
          // },
          cliEdit(scope){
            if(!scope.row.hasClose){
              this.$set(scope.row,'edit',true)
            }else{
              this.$message({type:'warning',message:scope.row.upperDate +' has been closed!'})
            }

          },
          confirmEdit(row) {
          //debugger
              if(this.option._edit_list){
                this.editFn(row,'*')
              }
            this.$emit('confirmEdit', row,this.editFn)
            this.edit = false
                  // this.row.edit = false
          },
          close(id){
            this.$emit('close',id)
          },
          editFn(_list,newKey='_'){
            				 //点击编辑的时候 把 _list. 赋予 _list._
            				 if(this.scope.row.edit||newKey=='*'){
            					 for(var i in _list){
            						//_list['_'+i] = _list[i]
                        if((i!=='isDelete'||'edit'||'cby'||'_isDelete'||'_edit'||'_cby')&&i.indexOf('_')<=-1){
                          if(typeof(_list[i])==='object'){
                            this.editFn(_list[i],newKey)

                          }else if(newKey=='*'&&_list['_'+i]){
                            _list[i]=_list['_'+i]
                          }
                        this.$set(_list,(newKey=='*'?'':'_')+i,_list[i])
                        }

            					 }
            }
          },
          del(id,ind,scope) {

            if(this.option){
              if(this.option.list&&this.option._del&&ind>=0){
              this.option.list.splice(ind,1)
              // this.$set(this,'list',[])
              }
            }
          this.$emit('del', id,ind,scope,this)
               // this.edit = false
               // this.row.edit = false
          }
        }
    }
</script>

<style scoped lang="scss">
  #EditDel{

  .iconBtn{
    height:41px;
    i{
      &.editOk{
        color: red;
      }
      font-size: 20px;
    }
  }
  }
</style>
